<template>
	<view>
			<view class="top">
				<u-subsection
					:list="list"
					mode="button"
					:current="current1"
					@change="change1"
					activeColor = "#FFF"
					inactiveColor="#FFF"
					hbgColor = '#fc6758'
					bgColor = 'transparent'
				></u-subsection>
			</view>
			
			<view class="thread">
				<view class="nd">
					<view class="head2nd" style="" v-if="userslist[1] != null">
						<image v-if="userslist[1] != null" class="heads2" :src='userslist[1].imageUrl' ></image>
					</view>
					<view class="names" style="" v-if="userslist[1] != null">
						{{userslist[1].name |phone4}}
					</view>
					<view class="jifen" style="" v-if="userslist[1] != null">
						<text>{{userslist[1].pointsNum}}</text>
						<text>牛果</text>
					</view>
				</view>
				<view class="st">
					<view class="head1st" style="" v-if="userslist[0] != null">
						<image  class="heads1" v-if="userslist[0] != null" :src='userslist[0].imageUrl'></image>
					</view>
					<view class="names" style="" v-if="userslist[0] != null">
						{{userslist[0].name |phone4}}
					</view>
					<view class="jifen" style="" v-if="userslist[0] != null">
						<text>{{userslist[0].pointsNum}}</text>
						<text>牛果</text>
					</view>
				</view>
				<view class="rd">
					<view class="head3rd" style="" v-if="userslist[2] != null">
						<image  class="heads3" v-if="userslist[2] != null" style="" :src='userslist[2].imageUrl' ></image>
					</view>
					<view class="names" style="" v-if="userslist[2] != null">
						{{userslist[2].name |phone4}}
					</view>
					<view class="jifen" style="" v-if="userslist[2] != null">
						<text>{{userslist[2].pointsNum}}</text>
						<text>牛果</text>
					</view>
				</view>
			</view>
			
			<view class="lists">
				<!-- <image src="../../static/tabsIcon/clubbottom.jpg" mode="" style="position: absolute;width: 100%;height: 100%;z-index: 0;border-top: 5upx solid #FFFFFF;border-radius: 80upx 80upx 0 0;border-radius: 80upx 80upx 0 0;overflow: hidden;"></image> -->
				<!-- <view  @click="open()" class="btnsf" style="" v-if="shows">
					<view>▲</view>
				</view>
				<view  @click="open()" class="btnsf" v-else>
					<view>▼</view>
				</view> -->
				<!-- 折叠 -->
				<view  v-if="shows" >
					<view class="users" v-for="(index,item) in userslist" v-if="item >= 3"  >
						<text class="num" style="">{{item+1}}</text>
						<view class="usershead">
							<image  :src='index.imageUrl' mode="" style="width: 70upx;height: 70upx;border-radius: 999rem;"></image>
						</view>
						
						<text class="usersname" style="">{{index.name |phone4}}</text>
						<text class="usersintegral" style="">{{index.pointsNum}}</text>
					</view>
				</view>
				<!-- 当前牛粉排名 -->
				<view class="users" v-for="(index,item) in userslistmain" style="margin-top: 40upx;">
					<text class="num" style="">{{index.topNum}}</text>
					<view class="usershead">
						<image  :src='index.imageUrl' mode="" style="width: 70upx;height: 70upx;border-radius: 999rem;"></image>
					</view>
					
					<text class="usersname" style="">{{index.name |phone4}}</text>
					<text class="usersintegral" style="">{{index.pointsNum}}</text>
				</view>
				
				
			</view>
			<view class="texts">
				<view style="text-align: center;font-size: 40upx;margin: 40upx 0;width: 100%;">邀请新人福利多多</view>
				<rich-text :nodes="maintext"></rich-text>
				<!-- <u-parse :content="maintext"></u-parse> -->
				<view style="text-align: center;width: 100%;margin: 0 auto;left: 0;right: 0;" @longpress="code(urls)">
					<!-- <image style="width: 240upx;height: 240upx;" :src='urls' mode=""></image> -->
				</view>
				
			</view>
			
	</view>
</template>

<script>
	import {
		personallist
	} from '@/api/invite'
	export default {
		data() {
			return {
			maintext: `<span class="infoBox1">
	
			  一、活动玩法：<br /><br />
			  1.	凡是儒雅牛注册的实名认证用户，即成为儒雅牛的牛粉，牛粉在淘宝、京东等购物平台自购省钱约3%、分享赚钱约3%，省钱+赚钱，喊朋友一起来嗨！<br /><br />
			  2.	美团、饿了吗、电影、加油、充值缴费等享受优惠价格，羊毛薅起来！<br /><br />
			  3.	信用卡精准账单日提醒，有效降低负债率，提高综合信用评分，额度蹭蹭蹭！<br /><br />
			  二、活动奖励：
						<br />
						<br />
						平台VIP邀请新人注册，每次获得10积分；
						<br />
						被邀请者的手机号必须未注册过儒雅牛账号；
						<br />
						<br />
						被邀请人第一次商城下单，获得20积分；
						<br />
						被邀请人需在商城第一次下单且完成订单；（仅限首次）
						<br />
						<br />
						新人购买VIP，每次获得50积分；
						<br />
						邀请新人注册后购买VIP；
						<br />
						<br />
						每日签到，每次获得1积分，每日一次；
						<br />
						每日在儒雅牛签到签到；
						<br />
						<br />
						每日点赞，每次获得1积分，每日三次；
						<br />
						每日在儒雅牛圈子/社区点赞；
						<br />
						<br />
						每日评论，每次获得1积分，每日三次；
						<br />
						每日在儒雅牛圈子/社区评论；
						<br />
						<br />
						每日发布视频，首次获得5积分，后每次1积分，每日共三次；
						<br />
						每日在儒雅牛圈子发布自己的视频；
						<br />
						<br />
						每日做每日任务，每个任务单独计算规则，每次获得5积分，每日每个任务最多一次；
						<br />
						每日完成儒雅牛我的中任务；
						<br />
						<br />
			  1000牛果=1牛角（仅限VIP）
			  <br />
						<br />
			  1000牛果=10元代金券（用于牛粉商城购物<br />
						<br />
			  好友首次下单支付成功2小时后（实付金额&gt;5元），邀请者在24小时内可获得5元无门槛现金券1张；
			  <br />
						<br />
			  当月个人牛果排名前十，联系客服获得平台额外奖励
			  <br />
						<br />
			  三、声明：
			  <br />
			  <br />
			  活动期间如牛粉使用不正当手段获取奖励，儒雅牛有权利在事先不通知牛粉的情况下取消对其的奖励或者禁用该牛粉账号；牛粉参与本活动视为牛粉同意本活动规则；
			  <br />
			  如有疑问请联系儒雅牛客服。
						<br /><br />
			</span>	`,
		shows: true,
		current1: 0,
		list: ['日榜', '月榜', '总榜'],
		userslist:[],
		userslistmain:[],
		urls:'../../static/tabsIcon/ma.jpg'
			}
		},
		filters: {
			phone4(value) {
				let phones = ''
				if(Number(value)){
					phones = value.substring(0, 3) + "****" + value.substring(7);
				}else{
					phones = value;
				}
				return phones;
			}
		},
		created() {
			this.change1(0);
		},
		methods: {
			open(){
				
				if(this.shows == true ){
					this.shows = false;
				}else{
					this.shows = true;
				}
			},
			change1(index) {
				personallist(index).then(res => {
					if(res.success == 1){
						// this.main = res.data
						if(res.data.topTen.length != 0){
							this.userslist = res.data.topTen
						}
						this.userslistmain = [];
						if(res.data.oneSelf.id != null){
							this.userslistmain.push(res.data.oneSelf)
						}
					}else{
						uni.showToast({
							title: res.message,
							icon:'none',
							duration: 2000
						});
					}
				})
				// console.log(index)
				this.current1 = index
			},
			// // 保存图片
			// code(url) {
			// 	uni.downloadFile({
			// 		url,
			// 		success: (res) => { 
			// 			console.log(res.tempFilePath)
			// 			// 获取到图片本地地址后再保存图片到相册(因为此方法不支持远程地址)
			// 			uni.saveImageToPhotosAlbum({
			// 				filePath: res.tempFilePath,
			// 				success: () => {
			// 					uni.showToast({
			// 						title: "保存成功！"
			// 					})
			// 				},
			// 				fail: (err) => {
			// 					console.log(err)
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			
			change2(index) {
				this.current2 = index
			},
			change3(index) {
				this.current3 = index
			},
			change4(index) {
				this.current4 = index
			}
		}
	}
</script>
<style>

</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	page{
		background-color: rgb(229, 231, 233);
	}
	.top{
		
		.u-subsection__item__text{
			.u-subsection__item__text{
				z-index: 10;
			}
		}
		
	}
	.thread{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		height: 400upx;
		width: 100%;
		.st{
			margin-top: 20upx;
			// margin-right: 5%;
			// margin-left: 5%;
			flex-grow:1;
			height:350upx;
			width: 30%;
			.head1st{
				height:320upx;
				width: 250upx;
				margin-left: 0upx;
				background-image: url(../../static/tabsIcon/1st.png);
				background-size: 100%;
				background-repeat: no-repeat;
				overflow: hidden;
				.heads1{
					margin-top: 70upx;
					width: 250upx;
					height: 250upx;
					border-radius: 999rem;
				}
			}
		}
		.nd{
			margin-top: 140upx;
			flex-grow:1;
			height:220upx;
			width: 30%;
			.head2nd{
				height:200upx;
				width: 150upx;
				margin-left: 60upx;
				background-image: url(../../static/tabsIcon/2nd.png);
				background-size: 100%;
				background-repeat: no-repeat;
				overflow: hidden;
				.heads2{
					margin-top: 50upx;
					width: 150upx;
					height: 150upx;
					border-radius: 999rem;
				}
			}
		}
		.rd{
			margin-top: 140upx;
			flex-grow:1;
			height:220upx;
			width: 30%;
			.head3rd{
				height:200upx;
				width: 150upx;
				margin-left: 60upx;
				background-image: url(../../static/tabsIcon/3rd2.png);
				background-size: 65% 40%;
				background-position:50% 0%;
				background-repeat: no-repeat;
				overflow: hidden;
				.heads3{
					margin-top: 50upx;
					width: 150upx;
					height: 150upx;
					border-radius: 999rem;
				}
			}
		}
	}
	.heads{
		left: 50%;
		margin-left: -50upx;
		width: 100upx;
		height: 100upx;
		border-radius: 999rem;
	}
	.names{
		margin-top: 20upx;
		text-align: center;
		font-size: 32upx;
		color:#FFFFFF;
	}
	.jifen{
		text-align: center;
		font-size: 24upx;
		color:#FFFFFF;
	}
	.lists{
		width: 90%;
		margin: 40upx auto 0 auto;
		overflow: hidden;
		border-radius: 25upx;
		// background-image: url(../../static/tabsIcon/clubbottom.jpg);
		// background-color: transparent;
		background-color: #FFFFFF;
	}
	.users{
		position: relative;
		margin-top: 20upx;
		height: 80upx;
		z-index: 10;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;

		.num{
			width: 10%;
			color: #000;
			flex-grow:1;
			text-align: center;
		}
		.usershead{
			height:40upx;width: 40upx;
			flex-grow:1;			
		}
		.usersname{
			color: #000;
			width: 40%;
			flex-grow:2;
			text-align: center;
			border-bottom: 1upx solid #000000;
			overflow: hidden;
			/*超出部分隐藏*/
			white-space: nowrap;
			/*不换行*/
			text-overflow: ellipsis;
			line-height: 60upx;
			font-size: 30upx;
		}
		.usersintegral{
			color: #000000;
			flex-grow:1;
			width: 16%;
			text-align: left;
			border-bottom: 1upx solid #000000;
			line-height: 60upx;
			font-size: 30upx;
			overflow: hidden;
			/*超出部分隐藏*/
			white-space: nowrap;
			/*不换行*/
			text-overflow: ellipsis;
		}
	}
	.texts{
		position: relative;
		width: 100%;
		color: #000000;
		background-color: #fff;
		border-radius: 25upx;
		font-size: 30upx;
		width: 90%;
		left: 0;
		right: 0;
		margin: 40upx auto;
		min-height: 1100upx;
		padding: 10upx 40upx 0 40upx;
	}
	.btnsf{
		width: 100%;
		color: #000000;
		display: flex;
		justify-content: flex-end ;
		
		view{
			margin-right: 80upx;
		}
	}
	
	/deep/ .u-subsection--button {
		width: 90% !important;
		margin: 0 auto !important;
	}
</style>
